<template>
	<div class="flex ai-center pages">
		<i class="iconfont p-btn" @click="prev">&#xe720;</i>
		<input class="p-btn" v-model="page" @change="onChange" />/{{pages}}
		<i class="iconfont p-btn mr-20" @click="next">&#xe6f8;</i>
		每页
		<select v-model="per" class="p-btn" @change="onChange">
			<option value="10">10</option>
			<option value="20">20</option>
			<option value="30">30</option>
			<option value="50">50</option>
		</select>
		条数据
	</div>
</template>

<script>
	export default{
		props: {
			'crrent': {type:Number, default:1},
			'total': {type:Number, default:0}
		},
		data(){
			return{
				page: this.crrent,
				per:10
			}
		},
		computed:{
			pages(){
				return Math.ceil(this.total/this.per) || 1
			}
		},
		methods:{
			prev(){
				if(this.page > 1){
					this.page--
					this.onChange()
				}
			},
			next(){
				if(this.page < this.pages){
					this.page++
					this.onChange()
				}
			},
			onChange(){
				if(this.page > this.pages) this.page = this.pages
				this.$emit('change', {current:this.page, perPage:this.per})
			}
		}
	}
</script>

<style lang="scss">
.pages{
	justify-content: flex-end;
	margin: 20px 0 0;
	.p-btn{
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 30px;
		border: solid 1px #ddd;
		box-sizing: border-box;
		outline: 0;
		margin: 0 5px;
		border-radius: 5px;
	}
	input{
		width: 60px;
		text-align: center;
	}
	.iconfont{
		cursor: pointer;
	}
}
</style>
